<template>
  <!-- svip会员模块 -->
  <view class="vipPaid">
    <view class="card-section">
      <view class="acea-row row-middle">
        <image class="image" :src="userInfo.avatar"></image>
        <view class="text">
          <view class="name line1">{{ userInfo.nickname }}</view>
          <view v-if="userInfo.is_ever_level">VIP中介</view>
          <view v-else-if="userInfo.is_money_level">VIP中介 {{ userInfo.overdue_time | dateFormat }} 到期</view>
          <view class="acea-row row-middle" v-else>
            <span>您与</span>
            <span class="shopName line1">{{ userInfo.shop_name || '' }}</span>
            <span>天选之址的第 {{ userInfo.register_days || 0 }} 天</span>
          </view>
        </view>
      </view>
      <view class="acea-row row-between-wrapper info">
        <!-- <view v-if="userInfo.is_money_level"
          >已累积为您节省 ￥<text class="num">{{ userInfo.economize_money }}</text>
        </view> -->
        <view>开通即享VIP中介权益</view>
        <view class="btn" v-if="userInfo.user_audit == 1">审核已通过</view>
        <view class="btn" v-else>平台正在审核中...</view>
        <!-- <view class="btn" @click="scrollToCard">{{ userInfo.is_money_level ? '续费VIP中介' : '开通VIP中介' }}</view> -->
      </view>
    </view>
    <view class="right-section">
      <view class="section-hd acea-row row-center-wrapper">
        <view class="title acea-row row-center row-bottom">
          <!-- <text class="iconfont icon-huiyuan2"></text> -->
          VIP中介尊享权益
        </view>
      </view>
      <view class="section-bd acea-row row-between-wrapper">
        <!-- <view v-for="item in memberRights" :key="item.id" class="acea-row row-middle item">
          <image class="image" :src="item.pic"></image>
          <view class="text">
            <view class="name">{{ item.title }}</view>
            <view>{{ item.explain }}</view>
          </view>
        </view> -->
        <view class="acea-row row-middle item">
          <image class="image" src="https://mp.tianxuan88.com/uploads/system/47c6046274318574a4840ad4f4c566f1.png"></image>
          <view class="text">
            <view class="name">高佣金保障</view>
            <view class="desc">安全签约，带看成交赚60%佣金</view>
          </view>
        </view>
        <view class="acea-row row-middle item">
          <image class="image" src="https://mp.tianxuan88.com/uploads/system/b56f2bc3e92ddf7e306bdd228fae1993.png"></image>
          <view class="text">
            <view class="name">平台资源共享</view>
            <view class="desc">海量客源自动分配，快速成交</view>
          </view>
        </view>
        <view class="acea-row row-middle item">
          <image class="image" src="https://mp.tianxuan88.com/uploads/system/55f5518b80f35386bc7224cfb1ee3700.png"></image>
          <view class="text">
            <view class="name">终身保护奖励</view>
            <view class="desc">客源终身保护，首单奖20%佣</view>
          </view>
        </view>
        <view class="acea-row row-middle item">
          <image class="image" src="https://mp.tianxuan88.com/uploads/system/1c0fb1ff89e1f6f347fb131544056910.png"></image>
          <view class="text">
            <view class="name">自主推广创收</view>
            <view class="desc">自主推广，现金奖励助力收入增长</view>
          </view>
        </view>
        <!-- 
         https://mp.tianxuan88.com/uploads/system/47c6046274318574a4840ad4f4c566f1.png
         https://mp.tianxuan88.com/uploads/system/b56f2bc3e92ddf7e306bdd228fae1993.png
         https://mp.tianxuan88.com/uploads/system/55f5518b80f35386bc7224cfb1ee3700.png
         https://mp.tianxuan88.com/uploads/system/5843fc72656c1cfee8cec3e6e8d3107f.png
         https://mp.tianxuan88.com/uploads/system/1c0fb1ff89e1f6f347fb131544056910.png
         -->
      </view>
    </view>
    <view class="type-section" id="card" v-if="memberType.length && !userInfo.is_ever_level">
      <view class="title">
        <view class="bold">{{ userInfo.is_money_level ? '续费VIP中介' : '开通VIP中介' }}</view>
        <view
          >有效期至<text class="time">{{ memberEndTime }}</text></view
        >
      </view>
      <scroll-view class="scroll" scroll-x="true">
        <view v-for="item in memberType" :key="item.id" class="item" :class="{ on: item.id === vipId }" @click="checkType(item)">
          <view>{{ item.title }}</view>
          <view class="new"
            >￥<text class="num">{{ item.pre_price | moneyFormat }}</text></view
          >
          <view v-if="item.type === 'free'" class="info">试用{{ item.vip_day }}天</view>
          <view v-else-if="item.type === 'ever'" class="info">永久VIP中介</view>
          <view v-else class="old">￥{{ item.price | moneyFormat }}</view>
        </view>
      </scroll-view>
      <view v-if="memberExplain" class="agree">
        <navigator class="link" url="/pages/annex/vip_clause/index" hover-class="none">购买即视为同意《<text class="mark">VIP中介用户协议</text>》</navigator>
      </view>
      <view class="buy" @click="pay">{{ type == 'free' ? '立即试用' : '立即支付' }}</view>
      <!-- <view class="cash">
        <text @click="drawMemberCard">点击兑换卡密</text>
      </view> -->
    </view>
    <view v-if="memberCoupons.length" class="coupon-section">
      <view class="section-hd acea-row row-between-wrapper">
        <view class="title">VIP中介优惠券</view>
        <navigator class="link" url="/pages/annex/vip_coupon/index">查看更多<text class="iconfont icon-xiangyou"></text></navigator>
      </view>
      <scroll-view class="section-bd" scroll-x="true">
        <view v-for="item in memberCoupons" :key="item.id" class="item acea-row row-center-wrapper" :class="{ gray: item.is_fail || item.status === '已使用' }">
          <view class="money"
            ><text v-if="item.coupon_type == 1">￥</text><text class="num">{{ item.coupon_type == 1 ? item.coupon_price : parseFloat(item.coupon_price) / 10 }}</text
            ><text v-if="item.coupon_type == 2">折</text></view
          >
          <view class="text">
            <view class="name">{{ item.coupon_title }}</view>
            <view v-if="item.use_min_price === '0.00'" class="mark">无门槛券</view>
            <view v-else class="mark">满{{ item.use_min_price | moneyFormat }}可用</view>
          </view>
          <!-- <view class="btn">{{item.status}}</view> -->
        </view>
      </scroll-view>
    </view>
    <payment
      :payMode="payMode"
      :pay_close="pay_close"
      :payUserData="payUserData"
      :is-call="true"
      @onChangeFun="onChangeFun"
      @deleteOrder="deleteOrder"
      :order_id="pay_order_id"
      :totalPrice="totalPrice"
      :isCancel="isCancel"
    ></payment>
    <home v-if="navigation"></home>
    <view v-show="false" v-html="formContent"></view>
    <!-- #ifdef MP -->
    <!-- <authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize> -->
    <!-- #endif -->
  </view>
</template>

<script>
import home from '@/components/home'
import payment from '@/components/payment'
import colors from '@/mixins/color.js'
import { mapGetters } from 'vuex'
import { memberCard, memberCardDraw, getUserInfo, memberCardCreate, groomList, memberOverdueTime } from '@/api/user.js'
import { orderOfflinePayType, orderOtherDel } from '@/api/order.js'
import { toLogin } from '@/libs/login.js'
import { openPaySubscribe } from '@/utils/SubscribeMessage.js'
import dayjs from '@/plugin/dayjs/dayjs.min.js'
import { getRequest } from '../../../api/registerr'

export default {
  components: {
    home,
    payment
  },
  mixins: [colors],
  filters: {
    dateFormat: function (value) {
      return dayjs(value * 1000).format('YYYY-MM-DD')
    },
    moneyFormat: function (value) {
      return parseFloat(value)
    }
  },
  data() {
    return {
      memberType: [],
      userInfo: {},
      memberRights: [],
      memberExplain: [],
      memberCoupons: [],
      isGetFree: null,
      popupShow: false,
      account: '',
      password: '',
      goodsList: [],
      pay_order_id: '',
      payUserData: {},
      payMode: [
        {
          name: '微信支付',
          icon: 'icon-weixinzhifu',
          value: 'weixin',
          title: '微信快捷支付',
          payStatus: true
        },
        // #ifdef H5 ||APP-PLUS
        {
          name: '支付宝支付',
          icon: 'icon-zhifubao',
          value: 'alipay',
          title: '支付宝支付',
          payStatus: true
        }
        // #endif
      ],
      pay_close: false,
      totalPrice: '0',
      formContent: '',
      page: 1,
      limit: 15,
      finished: false,
      memberEndTime: '',
      // #ifdef H5
      isWeixin: this.$wechat.isWeixin(),
      // #endif
      type: '',
      svip: null,
      isShowAuth: false,
      vipId: 0,
      isPass: false,
      isCancel: false,
      order_uid: 0
    }
  },
  watch: {
    popupShow: {
      immediate: true,
      handler() {
        this.account = ''
        this.password = ''
      }
    },
    'userInfo.user_audit': function (newValue) {
      this.isPass = newValue == 1 // 根据 status 更新 isPass
    }
  },
  computed: mapGetters(['isLogin']),
  onLoad() {
    if (this.isLogin) {
      this.onLunch()
    }
  },
  onShow() {
    uni.removeStorageSync('form_type_cart')
    if (!this.isLogin) {
      toLogin()
    }
  },
  onReachBottom() {
    this.groomList()
  },

  methods: {
    deleteOrder(data) {
      orderOtherDel(data.order_id).then((res) => {
        console.log('res', res)
      })
    },
    /**
     * 授权回调
     */
    onLoadFun: function () {
      this.onLunch()
      this.isShowAuth = false
    },
    // 授权关闭
    authColse: function (e) {
      this.isShowAuth = e
    },
    onLunch() {
      this.getOrderPayType()
      // this.memberCard()
      this.groomList()
      this.getUserInfo()
    },
    pay() {
      console.log('pay')
      if (!this.vipId) {
        return uni.showToast({ title: '请先选择套餐', icon: 'none', duration: 2000 })
      }
      if (!this.isPass) {
        return uni.showToast({ title: '平台正在审核，审核通过后可开通', icon: 'none', duration: 2000 })
      }
      if (this.type === 'free') {
        this.createMemberCard('weixin')
      } else {
        this.pay_close = true
      }
    },
    scrollToCard() {
      const query = uni.createSelectorQuery().in(this)
      query
        .select('#card')
        .boundingClientRect((data) => {
          uni.pageScrollTo({
            scrollTop: data.top
          })
        })
        .exec()
    },
    goDetail(id) {
      uni.navigateTo({
        url: `/pages/goods_details/index?id=${id}`
      })
    },
    // 付费会员数据
    memberCard() {
      uni.showLoading({
        title: '正在加载…'
      })
      memberCard()
        .then((res) => {
          uni.hideLoading()
          const { is_get_free, member_coupons, member_explain, member_rights, member_type } = res.data
          this.isGetFree = is_get_free
          this.userInfo = is_get_free.user_info
          this.memberRights = member_rights
          // this.memberType = member_type
          this.memberCoupons = member_coupons
          this.memberExplain = member_explain
          if (is_get_free.is_record) {
            this.memberType = this.memberType.filter((item) => item.type !== 'free')
          }
          this.totalPrice = this.memberType[0].pre_price
          this.type = this.memberType[0].type
          this.totalPrice = this.memberType[0].pre_price
          this.svip = this.memberType[0]
          this.vipId = this.memberType[0].id
          memberOverdueTime({
            member_type: this.svip.type,
            vip_day: this.svip.vip_day
          }).then((res) => {
            this.memberEndTime = res.data.data
          })
        })
        .catch((err) => {
          uni.showToast({
            title: err,
            icon: 'none'
          })
        })
    },
    groomList() {
      if (this.finished) {
        return
      }
      uni.showLoading({
        title: '加载中'
      })
      groomList(5, {
        page: this.page,
        limit: this.limit
      })
        .then((res) => {
          uni.hideLoading()
          this.goodsList = this.goodsList.concat(res.data.list)
          this.finished = res.data.list.length < this.limit
          this.page += 1
        })
        .catch((err) => {
          uni.hideLoading()
        })
    },
    checkType(svip) {
      console.log('呼呼', svip)
      this.type = svip.type
      this.svip = svip
      this.totalPrice = svip.pre_price
      this.vipId = svip.id
      this.memberEndTime = svip.overdue_time
      // memberOverdueTime({
      // 	member_type: svip.type,
      // 	vip_day: svip.vip_day
      // }).then(res => {
      // 	this.memberEndTime = res.data.data;
      // });
    },
    closePopup() {
      this.popupShow = false
    },
    getMemberCard() {
      memberCard()
        .then((res) => {
          let data = res.data
          this.memberType = data.member_type
          this.memberRights = data.member_rights
          this.isGetFree = data.is_get_free
        })
        .catch((err) => {})
    },
    getOrderPayType() {
      orderOfflinePayType()
        .then((res) => {
          const { ali_pay_status, pay_weixin_open } = res.data
          this.payMode[0].payStatus = !!pay_weixin_open
          // #ifdef APP-PLUS || H5
          this.payMode[1].payStatus = !!ali_pay_status
          // #endif
        })
        .catch((err) => {
          uni.showToast({
            title: err,
            icon: 'none'
          })
        })
    },
    memberSelect(index) {
      this.memberSelected = index
    },
    // 卡密兑换
    drawMemberCard() {
      let data = {
        member_card_code: '',
        member_card_pwd: '',
        from: 'weixinh5'
      }
      if (!this.popupShow) {
        return (this.popupShow = true)
      }
      if (!this.account) {
        return uni.showToast({
          title: '请输入卡号',
          icon: 'none'
        })
      }
      if (!this.password) {
        return uni.showToast({
          title: '请输入卡密',
          icon: 'none'
        })
      }

      // #ifdef H5
      let ua = navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        data.from = 'weixin'
      }
      // #endif
      // #ifdef MP
      data.from = 'routine'
      // #endif
      uni.showLoading({
        title: '激活中'
      })
      // #ifdef MP
      memberCardDraw(data)
        .then((res) => {
          uni.showToast({
            title: res.msg,
            success() {
              this.popupShow = false
              this.getMemberCard()
            }
          })
        })
        .catch((err) => {
          uni.showToast({
            title: err,
            icon: 'none'
          })
        })
      // #endif
    },
    // 立即购买
    createMemberCard(type) {
      uni.showLoading({
        title: '正在加载…'
      })
      console.log('000', this.svip)
      let query = {
        order_uid: this.order_uid,
        pay_type: type || this.payMode[0].value,
        cycle: this.payUserData.cycle,
        role: this.payUserData.role,
        return_amount: this.payUserData.return_amount,
        type: '1',
        // #ifdef H5
        from: this.isWeixin ? 'weixin' : 'weixinh5',
        // #endif
        // #ifdef MP
        from: 'routine',
        // #endif
        // #ifdef APP-PLUS
        from: 'weixin',
        // #endif
        member_type: this.svip.id,
        price: this.svip.pre_price,
        money: this.svip.price,
        // #ifdef H5
        quitUrl: location.port
          ? location.protocol + '//' + location.hostname + ':' + location.port + '/pages/annex/vip_paid/index'
          : location.protocol + '//' + location.hostname + '/pages/annex/vip_paid/index'
        // #endif
      }
      // #ifdef MP
      openPaySubscribe().then(() => {
        memberCardCreate(query)
          .then((res) => {
            if (parseFloat(this.svip.pre_price) > 0) {
              this.callPay(res)
            } else {
              uni.hideLoading()
              return this.$util.Tips(
                {
                  title: '成功开启0元试用'
                },
                () => {
                  this.onLunch()
                }
              )
            }
          })
          .catch((err) => {
            uni.showToast({
              title: err,
              icon: 'none'
            })
          })
      })
      // #endif
      memberCardCreate(query)
        .then((res) => {
          console.log('memberCardCreate', res)
          if (parseFloat(this.svip.pre_price) > 0) {
            this.callPay(res)
          } else {
            uni.hideLoading()
            return this.$util.Tips(
              {
                title: '成功开启0元试用'
              },
              () => {
                this.onLunch()
              }
            )
          }
        })
        .catch((err) => {
          uni.showToast({
            title: err,
            icon: 'none'
          })
        })
    },
    // 调用支付
    callPay(data) {
      console.log('callPay')
      console.log('///', data)
      this.pay_order_id = data.data.result.order_id
      let that = this
      let { status, result } = data.data,
        { orderId, jsConfig } = result
      switch (status) {
        case 'ORDER_EXIST':
        case 'EXTEND_ORDER':
        case 'PAY_ERROR':
          uni.hideLoading()
          this.$util.Tips(
            {
              title: data.msg
            },
            {
              tab: 5,
              url: '/pages/annex/vip_paid/index'
            }
          )
          break
        case 'SUCCESS':
          uni.hideLoading()
          this.$util.Tips(
            {
              title: data.msg,
              icon: 'success'
            },
            {
              tab: 5,
              url: '/pages/annex/vip_paid/index'
            }
          )
          break
        case 'WECHAT_PAY':
          // #ifdef MP
          let mp_pay_name = ''
          if (uni.requestOrderPayment) {
            mp_pay_name = 'requestOrderPayment'
          } else {
            mp_pay_name = 'requestPayment'
          }
          uni[mp_pay_name]({
            timeStamp: jsConfig.timestamp,
            nonceStr: jsConfig.nonceStr,
            package: jsConfig.package,
            signType: jsConfig.signType,
            paySign: jsConfig.paySign,
            success: function (res) {
              that.$util.Tips(
                {
                  title: '支付成功',
                  icon: 'success'
                },
                () => {
                  that.pay_close = false
                  that.memberCard()
                }
              )
            },
            fail: function () {
              uni.showToast({
                title: '取消支付11',
                icon: 'none'
              })
            },
            complete: function () {
              uni.hideLoading()
            }
          })
          // #endif
          // #ifdef H5
          this.$wechat
            .pay(result.jsConfig)
            .then((res) => {
              this.isCancel = true
              this.$util.Tips({
                title: '支付成功',
                icon: 'success'
              })
              getRequest(`/api/fission/updateContractStatus?mobile=${this.payUserData.phone}`, function (err, res) {
                if (err) {
                  console.log('更新合同状态失败:', err)
                } else {
                  console.log('更新合同状态成功:', res)
                  uni.switchTab({
                    url: '/pages/user/index'
                  })
                }
              })
            })
            .catch((err) => {
              if (err.errMsg == 'chooseWXPay:cancel') {
                uni.showToast({
                  title: '已取消支付',
                  icon: 'none'
                })
                this.isCancel = true
                this.deleteOrder(result)
              }
            })
          // #endif
          // #ifdef APP-PLUS
          uni.requestPayment({
            provider: 'wxpay',
            orderInfo: jsConfig,
            success: (e) => {
              uni.showToast({
                title: '支付成功'
              })
              setTimeout((res) => {
                uni.navigateBack()
              }, 2000)
            },
            fail: (e) => {
              uni.showToast({
                title: '支付失败',
                icon: 'none',
                duration: 2000
              })
            },
            complete: () => {
              uni.hideLoading()
            }
          })
          // #endif
          break
        case 'WECHAT_H5_PAY':
          uni.showToast({
            title: data.msg,
            success() {
              location.href = jsConfig.mweb_url
            }
          })
          break
        case 'ALIPAY_PAY':
          uni.hideLoading()
          //#ifdef H5
          if (this.$wechat.isWeixin()) {
            uni.navigateTo({
              url: `/pages/users/alipay_invoke/index?id=${data.data.result.order_id}&pay_key=${data.data.result.pay_key}&from=member`
            })
          } else {
            uni.hideLoading()
            this.formContent = jsConfig
            this.$nextTick(() => {
              document.getElementById('alipaysubmit').submit()
            })
          }
          //#endif
          // #ifdef MP
          uni.navigateTo({
            url: `/pages/users/alipay_invoke/index?id=${data.data.result.order_id}&link=${jsConfig.qrCode}&from=member`
          })
          // #endif
          // #ifdef APP-PLUS
          uni.requestPayment({
            provider: 'alipay',
            orderInfo: jsConfig,
            success: (e) => {
              uni.showToast({
                title: '支付成功'
              })
              setTimeout((res) => {
                uni.navigateBack()
              }, 2000)
            },
            fail: (e) => {
              uni.showModal({
                content: '支付失败',
                showCancel: false,
                success: function (res) {
                  if (res.confirm) {
                  } else if (res.cancel) {
                  }
                }
              })
            },
            complete: () => {
              uni.hideLoading()
            }
          })
          // #endif
          break
      }
    },
    onChangeFun: function (e) {
      let opt = e
      let action = opt.action || null
      let value = opt.value != undefined ? opt.value : null
      action && this[action] && this[action](value)
    },
    payClose: function () {
      this.pay_close = false
    },
    payCheck: function (type) {
      console.log('payCheck')
      this.createMemberCard(type)
    },
    // 激活
    checkForm(e) {
      let formData = e.detail.value,
        data = {
          member_card_code: '',
          member_card_pwd: '',
          from: 'H5 '
        }
      if (!formData.account) {
        return uni.showToast({
          title: '请输入卡号',
          icon: 'none'
        })
      }
      if (!formData.password) {
        return uni.showToast({
          title: '请输入卡密',
          icon: 'none'
        })
      }
      data.member_card_code = formData.account
      data.member_card_pwd = formData.password
      // #ifdef H5
      let ua = navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        data.from = 'weixin'
      }
      // #endif
      // #ifdef MP
      data.from = 'routine'
      // #endif
      uni.showLoading({
        title: '激活中'
      })
      memberCardDraw(data)
        .then((res) => {
          let that = this
          this.memberCard()
          uni.showToast({
            title: res.msg,
            success() {
              that.onLunch()
              that.popupShow = false
            }
          })
        })
        .catch((err) => {
          uni.showToast({
            title: err,
            icon: 'none'
          })
        })
    },
    getUserInfo: function () {
      let that = this
      getUserInfo().then((res) => {
        console.log('>>>>>>>>>>获取VIP信息', res.data.agent_rule)
        that.userInfo = res.data
        that.order_uid = res.data.spread_uid
        that.isPass = res.data.user_audit == 1 ? true : false
        that.payUserData = {
          cycle: res.data.agent_rule.cycle,
          phone: res.data.phone,
          return_amount: res.data.agent_rule.return_amount,
          role: res.data.role == '2' ? '1' : '2'
        }
        that.memberType = [
          {
            id: 3,
            overdue_time: new Date(new Date().setDate(new Date().getDate() + 365)).toISOString().split('T')[0],
            pre_price: res.data.agent_rule.registration_fee,
            price: '199',
            title: '年卡',
            type: 'year',
            vip_day: 365
          }
        ]
        if (res.data.storeUserMobile) {
          if (res.data.phone == '') {
            uni.navigateTo({
              url: '/pages/users/user_phone/index'
            })
          }
        }
        that.stu = res.data.svip_open
        that.memberStatus = parseInt(res.data.member_func_status)
        that.vipStatus = res.data.vip_status
        that.$store.commit('SETUID', res.data.uid)
        that.$store.commit('UPDATE_USERINFO', res.data)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.vipPaid {
  // background-color: #fff;
  height: 100vh;
  padding-bottom: 50rpx;
}
.card-section {
  height: 328rpx;
  padding: 88rpx 66rpx 0;
  background: #ffffff
    url('')
    center/100% 100% no-repeat;

  .image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .text {
    margin-left: 15rpx;
    font-size: 22rpx;
    line-height: 30rpx;
    color: #89735b;
    width: 400rpx;
    .shopName {
      max-width: 164rpx;
    }
  }

  .name {
    margin-bottom: 2rpx;
    font-weight: bold;
    font-size: 30rpx;
    line-height: 42rpx;
    color: #333333;
  }

  .info {
    margin-top: 74rpx;
    font-size: 24rpx;
    color: #ae5a2a;
  }

  .num {
    font-size: 36rpx;
  }

  .btn {
    padding: 5rpx 15rpx;
    // width: 146rpx;
    // height: 44rpx;
    border-radius: 22rpx;
    background-color: #ffffff;
    line-height: 44rpx;
    text-align: center;
  }
}

.right-section {
  background-color: #ffffff;

  .section-hd {
    padding-top: 34rpx;
    padding-bottom: 34rpx;

    .title {
      width: 543rpx;
      height: 90rpx;
      background: url('')
        center/cover no-repeat;
      font-weight: bold;
      font-size: 34rpx;
      line-height: 1.1;
      color: #89735b;
    }

    .iconfont {
      font-size: 34rpx;
      color: #89735b;
    }
  }

  .section-bd {
    padding: 0 30rpx 15rpx;

    .item {
      width: 338rpx;
      height: 160rpx;
      padding: 0 20rpx;
      border-radius: 20rpx;
      margin-bottom: 14rpx;
      background-color: #f7f7f7;
    }

    .image {
      width: 80rpx;
      height: 80rpx;
    }

    .text {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
      margin-left: 22rpx;
      overflow: hidden;
      white-space: nowrap;
      font-size: 24rpx;
      line-height: 33rpx;
      color: #9a856d;
    }

    .name {
      margin-bottom: 2rpx;
      font-size: 26rpx;
      line-height: 37rpx;
      color: #333333;
    }
    .desc {
      white-space: normal;
      overflow-wrap: break-word;
    }
  }
}

.type-section {
  margin-top: 20rpx;
  background-color: #ffffff;
  padding-bottom: 138px;
  .title {
    padding: 26rpx 30rpx 0;
    font-size: 24rpx;
    color: #797979;

    .bold {
      display: inline-block;
      margin-right: 14rpx;
      font-weight: bold;
      font-size: 32rpx;
      line-height: 45rpx;
      color: #333333;

      + view {
        display: inline-block;
      }
    }

    .time {
      margin-left: 14rpx;
      font-size: 24rpx;
      color: #ae5a2a;
    }
  }

  .scroll {
    white-space: nowrap;
  }

  .item {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 210rpx;
    height: 232rpx;
    border-radius: 12rpx;
    margin: 32rpx 30rpx 30rpx 0;
    box-shadow: 0 3rpx 30rpx rgba(0, 0, 0, 0.1);
    font-size: 30rpx;
    line-height: 42rpx;
    color: #754e19;

    &:first-child {
      margin-left: 30rpx;
    }

    &.on {
      border: 3rpx solid #fcc282;
      background-color: #fef7ec;
    }
  }

  .new {
    margin-top: 22rpx;
    font-weight: 600;
    font-size: 34rpx;

    .num {
      font-size: 48rpx;
      line-height: 48rpx;
    }
  }

  .old {
    margin-top: 13rpx;
    text-decoration: line-through;
    font-size: 24rpx;
  }

  .info {
    margin-top: 13rpx;
    font-size: 24rpx;
  }

  .agree {
    font-size: 22rpx;
    text-align: center;
    color: #797979;

    .link {
      display: inline-block;
    }

    .mark {
      color: #ae5a2a;
    }
  }

  .buy {
    height: 80rpx;
    border-radius: 12rpx;
    margin: 30rpx 30rpx 0;
    background: linear-gradient(90deg, #fee2b7 0%, #fdc383 100%);
    font-size: 30rpx;
    line-height: 80rpx;
    text-align: center;
    color: #5d3324;
  }

  .cash {
    padding-top: 26rpx;
    padding-bottom: 29rpx;
    font-size: 28rpx;
    text-align: center;
    color: #754e19;
  }
}

.coupon-section {
  margin-top: 20rpx;
  background-color: #ffffff;

  .section-hd {
    padding: 26rpx 30rpx 0;

    .title {
      font-weight: bold;
      font-size: 32rpx;
      line-height: 45rpx;
      color: #333333;
    }

    .link {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #89735b;

      .iconfont {
        margin-left: 6rpx;
        font-size: 14rpx;
      }
    }
  }

  .section-bd {
    white-space: nowrap;

    .item {
      display: inline-flex;
      width: 360rpx;
      height: 148rpx;
      margin: 26rpx 20rpx 30rpx 0;
      background: url('')
        center/cover no-repeat;

      &:first-child {
        margin-left: 30rpx;
      }

      &:last-child {
        margin-right: 30rpx;
      }

      &.gray {
        background-image: url('');

        .btn {
          color: #9f9f9f;
        }

        .money {
          color: #fff;

          .num {
            color: #fff;
          }
        }

        .name {
          color: #fff;
        }

        .text {
          color: #9f9f9f;
        }

        .mark {
          color: #a8a8a8;
        }
      }

      .btn {
        width: 52rpx;
        padding-right: 14rpx;
        padding-left: 14rpx;
        white-space: pre-wrap;
        font-size: 24rpx;
        color: #5d3324;
      }

      .text {
        max-width: 194rpx;
        margin-left: 14rpx;
      }

      .name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: bold;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #5d3324;
      }

      .mark {
        display: inline-block;
        height: 35rpx;
        padding-right: 14rpx;
        padding-left: 14rpx;
        border-radius: 19rpx;
        margin-top: 6rpx;
        background-color: rgba(255, 255, 255, 0.3);
        font-size: 22rpx;
        line-height: 35rpx;
        color: #5f3426;
      }

      .money {
        max-width: 170rpx;
        text-align: center;
        font-size: 30rpx;
        font-weight: 800;
      }

      .num {
        position: relative;
        font-size: 54rpx;
        color: #333333;
      }
    }
  }
}

.goods-section {
  margin-top: 20rpx;
  background-color: #ffffff;

  .section-hd {
    padding: 26rpx 30rpx 0;
    font-weight: bold;
    font-size: 32rpx;
    line-height: 45rpx;
    color: #333333;
  }

  .section-bd {
    padding: 0 30rpx 0 7rpx;
    margin-top: 26rpx;

    .item {
      width: 215rpx;
      padding-bottom: 24rpx;
      margin-left: 23rpx;
    }

    .image {
      width: 215rpx;
      height: 215rpx;
      border-radius: 6rpx;
    }

    .name {
      margin-top: 10rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 26rpx;
      line-height: 37rpx;
      color: #333333;
    }

    .svip-price {
      margin-top: 6rpx;
      font-size: 26rpx;
      color: #333333;

      image {
        width: 56rpx;
        height: 20rpx;
        margin-left: 6rpx;
      }
    }

    .shop-price {
      margin-top: 4rpx;
      font-size: 20rpx;
      color: #999999;
    }
  }
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 600rpx;
  height: 634rpx;
  padding: 60rpx 40rpx 0;
  margin-top: -79rpx;
  background: url('')
    center/100% 100% no-repeat;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.3s;

  &.on {
    transform: translate(-50%, -50%) scale(1);
  }

  .cont {
    padding: 20rpx;
  }

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 45rpx;
    padding-bottom: 45rpx;

    .line {
      width: 70rpx;
      height: 2rpx;
      background-color: #e6c3a5;
    }

    .name {
      margin-right: 25rpx;
      margin-left: 25rpx;
      font-size: 40rpx;
      color: #89735b;
    }
  }

  .form {
    .input {
      padding-right: 50rpx;
      padding-left: 50rpx;
      height: 98rpx;
      border-radius: 12rpx;
      margin-bottom: 35rpx;
      background: rgba(255, 187, 129, 0.15);
      font-size: 30rpx;
    }

    .button {
      height: 72rpx;
      border-radius: 36rpx;
      margin: 45rpx 80rpx 20rpx;
      background: #353841;
      font-size: 32rpx;
      line-height: 72rpx;
      color: #ffffff;
    }
  }

  .image {
    position: absolute;
    top: -57rpx;
    left: 50%;
    width: 146rpx;
    height: 114rpx;
    transform: translateX(-50%);
  }

  .iconfont {
    position: absolute;
    bottom: -110rpx;
    left: 50%;
    background: none;
    transform: translateX(-50%);
    font-size: 48rpx;
    line-height: 1;
    color: #ffffff;
  }
}
</style>
